<template>
    <h2>Child 子级组件</h2>
    <h3>msg:{{msg}}</h3>
    <h3>count:{{count}}</h3>
    <button @click="emitXxx">分发事件</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent ({
    name:'Child',
    props: ['msg', 'msg2'],

    // setup 细节问题：
    // setup 是在beforeCreate生命周期之前就执行了，而且就执行一次
    // 由此可以推断出：setup在执行的时候，当前的组件还没有被创建出来，也就意味着：组件实例对象this根本就不能用
    // this是undefined，说明，就不能通过this再去调用data/computed/methods/props中的内容了
    // 其实所有的composition API相关回调函数中也都不可以

    // setup中的返回值是一个对象，内部的属性和方法是给html模板使用的
    // setup 中的对象内部的属性和data函数中return对象的属性都可以在html模板中使用
    // setup 中的对象中的属性和data函数中的对象中的属性会合并为组件对象的属性
    // setup 中的对象中的方法和methods中对象的方法会合并为组件对象的方法
    // 在vue3中尽量不要混合的使用data和setup及methods和setup
    // 一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
    // setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据

    // 数据初始化的生命周期回调
    // beforeCreate() {
    //     console.log('beforeCreate执行了', this)
    // },
    // 界面渲染完毕
    // mounted() {
    //     console.log('mounted执行了')
    // },
    setup(props, {attrs, slots, emit}){
    // setup(props, context) {
        // props 参数，是一个对象，里面有父级组件向子级组件传递的数据，并且是在子级组件中使用props接受到的所有的属性
        // 包含props配置声明且传入了的所有属性的对象
        // console.log("props", props)
        // context 参数是一个对象，里面有attrs对象（获取当前组件标签上的所有的属性的对象，但是该属性是在props中没有声明接收的所有的属性的对象），emit方法（分发事件的），slot对象（插槽）
        // console.log("context-attrs", context.attrs)
        // console.log("context-emit", context.emit)
        // console.log('=============')

        console.log('setup执行了', this)

        const showMsg1 = ()=> {
            console.log('setup中的showMsg方法')
        }

        function emitXxx() {
            // context.emit('xxx', '++')
            emit('xxx', '++')
        }

        return {
            showMsg1,
            emitXxx
            // setup 中一般都是返回一个对象，对象中的属性和方法都可以在html模板中直接使用
        }
    },
    // data() {
    //     return {
    //         count: 10
    //     }
    // },
    // methods: {
    //     showMsg2() {
    //         console.log('methods中的showMsg方法')
    //     }
    // }
})
</script>